<template>
	<!-- 9.9 包邮活动 -->
	<div class="nine_piece">
		<div class="nav_bar_top">
			<div class="cover">
				<!-- <div class="cover_inco" @click="retreat">
					<van-icon name="arrow-left" />
				</div> -->
				<van-nav-bar
				  left-text=""
				  left-arrow
				  fixed
				  @click-left="retreat"
				/>
			</div>
			<div class="commd_list">
				<div class="itens">
					<div class="nine_title">
						<div>
							<div class="bor_but"></div>
							<div class="bor_rad"></div>
							<div class="nine_txt">热门推荐</div>
							<div class="bor_rad"></div>
							<div class="bor_but"></div>
						</div>
					</div>

					<!-- <div class="comdList">
					 -->
					  <div ref='wrapper' class="comd" :style="{ height: (wrapperHeight-8) + 'px' }">
						<mt-loadmore :top-method="loadTop"
									:bottom-method="loadBottom"
									:bottom-all-loaded="allLoaded"
									:auto-fill="false"
									ref="loadmore">
							<ul id="goods-list" class="goods_list">
								<li v-for="(item,i) in commodityList" :key="i">
									<div class="good_img" @click="lookDetails(item)">
										<div>
											<img :src="item.product_image_url">
										</div>
									</div>
									<p class="title">{{item.name}}</p>
									<div class="pce_sum">
										<p class="price"><span>￥{{item.price}}</span></p>
										<p class="price1"><span>￥{{item.price*2}}</span></p>
									</div>
								</li>
							</ul>
						</mt-loadmore>
						<div class="loading_finish" v-show="allLoaded">
						  没有更多的数据了！
						</div>
					</div>
				</div>
			</div>

		</div>
		<loading v-show="bool"></loading>
	</div>
</template>

<script>
	import loading from '../purchase/loading.vue';
	export default {
		name: "MemberContainer",
		data() {
			return {
				commodityList:[],
				bool:false,
				pageNumBottom:1,
				allLoaded:false,//是否上拉
				wrapperHeight:0,//自适应高度
			}
		},
		created(){
			this.seckillList();
		},
		mounted() {
			 // 父控件要加上高度，否则会出现上拉不动的情况
			this.wrapperHeight =
			  document.documentElement.clientHeight -
			  this.$refs.wrapper.getBoundingClientRect().top;
		},
		methods: {
			//后退
			retreat() {
				if (window.history.length <= 1) {
					this.$router.push({path:'/'})
				} else {
					this.$router.go(-1);
				}
			},
			//商品详细
			lookDetails(item){
				// item.productImages=[{'imageUrl':item.product_image_url}];
				// item.seckTime=[{'seckTime':this.seckTime}];
				// localStorage.setItem("commdInfo",JSON.stringify(item));
				this.$router.push({path:'/nineCommodityDetail',query:{
					id:item.id
				}})
			},
			//商品列表
			async seckillList(){
				this.bool=true;
				let params={
					  pageNum:this.pageNumBottom,//页码
					  pageSize:10,//每页条数
					  salesMode:10,//商品类型，7普通商品，8动感地带，9实体联盟，10九块九包邮，11秒杀
					  // activityTime:"13",//
					 }; 
				const res = await this.$axios.post(this.$api.shopListData, params);
				if (res.success) {
					this.commodityList = res.data.list;
					this.$refs.loadmore.onTopLoaded();
					this.isHaveMore(res.data.nextPage);
				} else {
				  this.$toast(res.msg);
				}
				this.bool=false;
			},
			//上拉刷新·
			loadTop() {
				this.loadFrist();
			},
			loadBottom() {
				this.loadMore();
			},
			 // 下来刷新加载
			async loadFrist() {
				this.$store.commit('noLoadEnabled');
				this.pageNumBottom = 1;
				let params={
					  pageNum:this.pageNumBottom,//页码
					  pageSize:10,//每页条数
					  salesMode:10,//商品类型，7普通商品，8动感地带，9实体联盟，10九块九包邮，11秒杀
					  // activityTime:"13",//
					 }; 
				const res = await this.$axios.post(this.$api.shopListData, params);
				if (res.success) {
					this.commodityList = res.data.list;
					this.$refs.loadmore.onTopLoaded();
					this.isHaveMore(res.data.nextPage);
				} else {
				  this.$toast(res.msg);
				}
				this.$store.commit('yesLoadEnabled');
			},
			// 加载更多
			async loadMore() {
				this.$store.commit('noLoadEnabled');
			  this.pageNumBottom += 1;
			  let  params={
				  pageNum:this.pageNumBottom,//页码
				  pageSize:10,//每页条数
				  salesMode:10,//商品类型，7普通商品，8动感地带，9实体联盟，10九块九包邮，11秒杀
				  // activityTime:"13",//
				}; 
			  const res = await this.$axios.post(this.$api.shopListData, params);
			  if (res.success) {
				  this.commodityList = this.commodityList.concat(res.data.list);
				  this.isHaveMore(res.data.nextPage);
				  this.$refs.loadmore.onBottomLoaded();
			  } else {
			    this.$toast(res.msg);
			  }
			  this.$store.commit('yesLoadEnabled');
			},
			isHaveMore:function(isHaveMore){
			  // 是否还有下一页，如果没有就禁止上拉刷新
			  this.allLoaded = true; //true是禁止上拉加载
			  if(isHaveMore){
			    this.allLoaded = false;
			  }
			},
		},
		components:{
			loading,
		}
	}
</script>

<style lang="scss" scoped>
	.nine_piece {
		width: 100%;
		height: 100%;
		position: relative;

		.nav_bar_top {
			background: url('https://image.soole.com.cn/sl_nine_piece1.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

		.cover {
			width: 100%;
			height: 200px;
			background: url('https://image.soole.com.cn/sl_nine_piece2.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			
			.van-nav-bar{
				background:none;
				background: url('https://image.soole.com.cn/sl_nine_piece2.png');
				background-size: 100%;
				background-repeat: no-repeat;
			}
			.van-nav-bar .van-icon{
				color: #fff;
			}
			
			[class*=van-hairline]::after{
				border: none;
			}
		}

		.commd_list {
			box-sizing: border-box;
			padding: 0 8px;
			
			padding-bottom:8px;

			.nine_title {
				margin-bottom: 10px;

				.bor_but {
					width: 16px;
					border-bottom: 2px solid #FC2A4C;
					position: relative;
					bottom: 4px;
				}

				.bor_rad {
					width: 5px;
					height: 5px;
					background-color: #FC2A4C;
					border-radius: 50%;
					position: relative;
					bottom: -19px;
					margin: 0 9px;
				}

				.nine_txt {
					color: #FC2A4C;
					font-size: 15px;
					position: relative;
					bottom: -9px;
					margin: 0 8px;
					font-weight: 700;
				}
			}

			.nine_title>div {
				display: flex;
				width: 50%;
				height: 28px;
				margin: 0 auto;
				position: relative;
				text-align: center;
				justify-content: center;

			}

			.itens {
				background: url('https://image.soole.com.cn/sl_nine_piece3.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				padding-top: 4px;
				border-radius: 5px;
				// min-height: 500px;
				.mint-loadmore-content{
					// overflow: scroll;
					
				}
			}
			.comd{
				// margin-top: 46px;
				overflow-y:scroll;
				overflow-x:hidden; //设置Y轴出现滚动条，X轴隐藏
				.van-tabs{
					// min-height: 235px;
				}
			}
			// .loadmore-box{
			// 	overflow-y: scroll;
			// 	height: 800px;
			// }
			.goods_list {
				display: flex;
				flex-wrap: wrap;
				padding-left: 6px;
				li {
					width: 48%;
					background-color: #FFFFFF;
					border-radius: 5px;
					box-sizing: border-box;
					padding: 10px;
					margin-bottom: 6px;
					margin-right: 6px;
				}
				.title {
					color: #333333;
					font-size: 12px;
					margin-top: 12px;
					height: 32px;
				}

				.pce_sum {
					display: flex;
					margin-right: 12px;
					padding-top: 12px;
					.price {
						font-size: 12px;
						font-weight: 600;
						color: #F82E2E;
						margin-right: 10px;
					}

					.price1 {
						color: #999999;
						font-size: 0.628em;
						text-decoration: line-through;
					}
				}
			}
			.good_img {
				width: 100%;
				div{
					width: 150px;
					height: 150px;
					margin: 0 auto;
				}
			}
			img {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
